4000-888-103

资讯动态跳出思维圈,“类H5”助你市场推广一臂之力资讯详情

跳出思维圈,“类H5”助你市场推广一臂之力

2019-07-15 13:47:38

  HTML5,也就是我们常说的H5,它是一种标记语言,主要用于网站的编写和Web App的开发。H5制作的网页可以说是现在网络推广、促销方面的利器。其优点主要体现在两个方面,一是丰富的动效支持,二是查看方便。H5近年来越来越受到人们的喜爱。

  但是,使用H5做开发,并不是人人都能做的,需要大量的编程语言和开发的基础,而一些所谓的简单设计H5的工具功能又不完善。如果我不会js,不会HTML5语言,怎么能做出一个“类H5”的简单App呢?

  手机h5页面开发作为产品小白的熊先生最近正在闷头做原型,在制作的过程中忽然发现,自己的设计其实完全可以应用到H5网页这样的推广当中。最近正在做一个旅游相关的app,那么我就帮忙帮到底,做一个旅游活动推广的“类H5”推广原型吧。

  开始之前,我们需要确定一个原型设计工具,就用Mockplus好了,最近一直在用,拿来也比较顺手。

  然后,列好大钢,编辑项目树。良好的规划是优秀的设计中必不可少的一部分。

  接下来,我们开始页面的设计。

  第一步:载入动画。

  载入动画是H5页面标志性的效果之一,“类H5”当然也不能忘记这一点。

  方法:导入需要的图片,根据页面的内容,设置某些组件为不可见;拖拽它们各自的链接点设置“载入时”显示自己的交互效果。并且给部分组件设置上移动的动画效果,使得整个页面更加生动。

  第二步:设置交互效果。

  使用原型设计工具来设置“类H5”网页最大的优势就在于:原型设计工具有更多的交互效果,你想要的总有办法可以实现。这里我们先简单的设置一些弹窗的效果。比如,关于旅行社的介绍、导游的相关资质、旅游线路的介绍等等。

  方法:拖拽出相应的弹窗组件,双击打开设计。然后拖拽页面中组件的链接点到弹窗上,最后设置弹出的效果。

  第三步:页面跳转。

  在用户比较感兴趣的内容区域设置页面的跳转,重点内容用新的页面来讲解,减少其他内容的干扰,不仅保证了吸引用户的眼球,更加保障页面运行的流畅程度。

  方法:设置页面的跳转效果对原型设计工具来说完全是小菜一碟,Mockplus只需要一个简单的拖拽动作就可以搞定了。

  第四部:在线发布。

  设计做的再好,没人欣赏怎么行?可是,要怎么才能把这样一个“类H5”的原型项目发出去呢?

  方法:发布。有了这个功能,你就可以把做好的作品上传到Mockplus的服务器,然后拿着这个链接分享给你的客户们了。而且,Mockplus可以很简单的就做到全屏演示的效果。怎么样,是不是很神奇?

  设计的内容比较简单,主要是希望大家能够明白这个意思。怎么判断网站是不是h5

  熊先生觉得:市场也好,设计也好,我们更注重的是得到的结果,而不是手中的工具。虽然使用原型设计工具来实现H5网页似乎有些风马牛不相及,但是只要能够解决实际的问题,何必要墨守在固定的模式里呢?



上一页 下一页

0
↑ 回到顶部

热门推荐

发送
//www.weibenh5.com/newhome/images/manman.png